<template>
  <div style="border: 1px solid blue">
    <h1>子组件1</h1>
    <h1>username:{{ uname }}</h1>
    <h1>age:{{ uage }}</h1>
    <h1>desc:{{ desc }}</h1>
  </div>
  <br />
  <div style="border: 1px solid blue">
    <h1>子组件2</h1>
    <h1>stuname:{{ childStudent.stuname }}</h1>
    <h1>stuclass:{{ childStudent.stuclass }}</h1>
  </div>
</template>

<script>
// inject用于接收父组件provide的值
import { ref, onMounted, inject } from "vue";
export default {
  name: "App",
  setup(props, content) {
    console.log(props);
    console.log(content);
    // Proxy {uname: '小明', uage: 18}
    const desc = ref(`${props.uname}的年龄是${props.uage}`);

    onMounted(() => {
      console.log("子组件onMounted");
    });

    const childStudent = inject("student");

    return { desc, childStudent };
  },
  props: ["uname", "uage"],
  data() {
    return {};
  },
  methods: {},
  computed: {},
  watch: {},
};
</script>

<style scoped>
</style>
